<template>
  <div class="company-detial__page">
    <div class="w-full absolute left-0 top-0 bg h-600px bg"></div>
    <!-- 头部 -->
    <div class="w-1200px mx-auto flex bg-#fff top-header rounded-8px px-32px py-30px relative z-1">
      <div class="flex items-center">
        <div class="w-77px h-77px !bg-red">
          <img :src="avatarUrl" class="w-full h-full" alt="" />
        </div>

        <div class="ml-26px">
          <span class="text-24px lh-24px font-700 text-#333"> {{ pageInfo?.name }} </span>
          <ul class="flex mt-24px text-16px font-400 text-#333">
            <template v-if="pageInfo?.isListed">
              <li>已上市</li>
              <li>丨</li>
            </template>
            <li>{{ pageInfo?.scaleCodeName }}</li>
            <li>丨</li>
            <li>{{ pageInfo?.industryName }}</li>
          </ul>
        </div>
      </div>

      <div class="ml-auto float-right">
        <div class="flex flex-col">
          <div class="mb-7px">
            <span class="text-#333 text-14px font-400 lh-14px mr-5px">在招职位</span>
            <span class="text-#3477E9 text-24px font-700">{{ num.num1 + num.num2 || 0 }}</span>
          </div>
          <a-button class="btn" type="primary" @click="onOnlineResume()">完善简历</a-button>
        </div>
      </div>
    </div>

    <!-- 内容 -->
    <div class="mt-30px w-1200px mx-auto relative z-1">
      <a-tabs v-model:activeKey="activeKey" @change="onChangeTab" class="tabs custom-tabs">
        <a-tab-pane key="1" tab="公司简介">
          <CompanyJianJie @change="onChangeTab" :info="pageInfo" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="在招职位">
          <CompanyZaiZhaoZhiWei />
        </a-tab-pane>
      </a-tabs>
    </div>

    <div class="h-70px"></div>
  </div>
</template>
<script lang="ts" setup>
import CompanyService from '@/api/company';
import router from '@/router';
import { ref, reactive, computed } from 'vue';
import { useRoute } from 'vue-router';

import { generateLogo } from '@/utils/util';

const route = useRoute();
const { params: _params, query } = route;
const activeKey = ref(query.key ? query.key : '1');
const pageInfo = ref();
const avatarUrl = computed(() => {
  const url = pageInfo.value?.logoVisitUrl;
  const isDefault = url?.indexOf('logodefault.png') > -1;
  return isDefault ? generateLogo(pageInfo.value.abbreviation) : url;
});

const num = reactive({
  num1: 0,
  num2: 0,
});

function onChangeTab(key: any) {
  activeKey.value = key;
}

async function getCompanyJob1() {
  try {
    const data = {
      jobType: 'full_time',
      pageNum: 1,
      pageSize: 15,
      companyId: _params.id,
    };

    const resp = await CompanyService.getCompanyJob(data);

    if (resp.code === 200) {
      num.num1 = resp.data.total;
    }
  } catch (error) {
    console.log(error);
  }
}
async function getCompanyJob2() {
  try {
    const data = {
      jobType: 'internship',
      pageNum: 1,
      pageSize: 15,
      companyId: _params.id,
    };

    const resp = await CompanyService.getCompanyJob(data);

    if (resp.code === 200) {
      num.num2 = resp.data.total;
      // if (jobType === 'full_time') num.num1 = resp.data.total;
    }
  } catch (error) {
    console.log(error);
  }
}

async function init() {
  try {
    const data = {
      companyId: _params.id,
      isHotCompany: query.isHotCompany,
    };

    const resp = await CompanyService.getCompanyDetail(data);

    if (resp.code !== 200) return;
    pageInfo.value = resp.data;
  } catch (error) {
    console.log(error);
  }
}

function onOnlineResume(key = '') {
  router.push(`/resume?key=${key}`);
}
onMounted(() => {
  init();
  getCompanyJob1();
  getCompanyJob2();
});
</script>

<style lang="scss" scoped>
@use '@/styles/reset-a-tabs';
.bg {
  background: linear-gradient(0deg, #f6f6f6, #eaf1fe);
}
.top-header {
  box-shadow: 0 1px 10px 0 #d0cbcc7a;
}
.company-detial__page {
  @apply bg-#F6F6F6 relative pt-47px;
  ul,
  li {
    list-style: none;
  }

  .btn {
    background: linear-gradient(-90deg, #3576e9, #5a95fb) !important;
    width: 125px !important;
    border-radius: 5px 5px 5px 5px !important;
  }
}
</style>
